<div class="row" [formGroup]="listBoxForm">
    <div class="col-md-5 col-lg-5 col-sm-12">
        <h4 class="text-center vertical-spacing-5">{{availableText}}</h4>
        <input type="text" class="form-control vertical-spacing-5" placeholder="{{availableFilterPlaceholder}}"
               formControlName="availableSearchInput" style="border: 1px solid #ccc;border-radius: 4px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" />
        <select class="form-control list-box" formControlName="availableListBox" multiple>
            <option *ngFor="let item of availableItems | arrayFilter:['text', searchTermAvailable] | arraySort:['text', 'ASC'];trackBy:trackByValue"
                    [value]="item?.value"
                    (dblclick)="moveAvailableItemToSelected(item)">{{item?.text}}</option>
        </select>
    </div>
    <div class="col-md-2 col-lg-2 col-sm-12 center-block text-center">
        <button type="button" class="btn btn-default col-md-8 col-md-offset-2 atr top80 sm-spacing" style="margin-top:50px;"
                *ngIf="moveAllButton" (click)="moveAllItemsToSelected()">
            <span style="margin-top:0px;" >新增全部</span>
        </button>
        <button type="button" class="btn btn-default col-md-8 col-md-offset-2 str vertical-spacing-5 sm-spacing"
                [disabled]="!availableListBoxControl.value?.length"
                (click)="moveMarkedAvailableItemsToSelected()">
            <span style="margin-top:0px;" >新增</span>
        </button>
        <button type="button" class="btn btn-default col-md-8 col-md-offset-2 stl vertical-spacing-5 sm-spacing"
                [disabled]="!selectedListBoxControl.value?.length"
                (click)="moveMarkedSelectedItemsToAvailable()">
            <span style="margin-top:0px;" >删除</span>
        </button>
        <button type="button" class="btn btn-default col-md-8 col-md-offset-2 atl bottom10 sm-spacing"
                *ngIf="moveAllButton" (click)="moveAllItemsToAvailable()">
            <span style="margin-top:0px;" >删除全部</span>
        </button>
    </div>
    <div class="col-md-5 col-lg-5 col-sm-12">
        <h4 class="text-center vertical-spacing-5">{{selectedText}}</h4>
        <input type="text" class="form-control vertical-spacing-5" placeholder="{{selectedFilterPlaceholder}}"
               formControlName="selectedSearchInput" style="border: 1px solid #ccc;border-radius: 4px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;"/>
        <select class="form-control list-box" formControlName="selectedListBox" multiple>
            <option *ngFor="let item of selectedItems | arrayFilter:['text', searchTermSelected] | arraySort:['text', 'ASC'];trackBy:trackByValue"
                    [value]="item?.value"
                    (dblclick)="moveSelectedItemToAvailable(item)">{{item?.text}}</option>
        </select>
    </div>
</div>
